// src/utils/highlight.js 文件路径，纯属自定义

// highlight.js  代码高亮指令
import Hljs from 'highlight.js/lib/common';
// 使用自己的样式文件
import '@/assets/css/student/mac.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
import ClipboardJS from "clipboard";

let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
  // 自定义指令 v-highlight
  Vue.directive('highlight', {
    // 被绑定元素插入父节点时调用
    inserted: function(el) {
      let blocks = el.querySelectorAll('pre code');
      for (let i = 0; i < blocks.length; i++) {
        Hljs.highlightBlock(blocks[i]);
      }
      codecopy_func(el.querySelectorAll('pre'));
    },
    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
    componentUpdated: function(el) {
      let blocks = el.querySelectorAll('pre code');
      for (let i = 0; i < blocks.length; i++) {
        Hljs.highlightBlock(blocks[i]);
      }
      codecopy_func(el.querySelectorAll('pre'));
    }
  })
};

/*生成复制按钮*/
function codecopy_func(blocks) {

  const btn = '<button class="codecopy-btn" data-title="复制" data-clipboard-action="copy" data-clipboard-target="#code_index"\n' +
    '       onClick="let t=this;t.innerHTML=\'复制成功\';setTimeout(function(){t.innerHTML=\'复制\';},1500);">复制</button>';
  //获取所有的代码区域的pre元素节点
  const codecopys = blocks;

  //遍历DOM（pre节点）节点
  for (let i = 0; i < codecopys.length; i++) {
    //pre元素对象
    let codecopy = codecopys[i];

    //生成复制按钮
    let html_temp = btn.replace(/index/g, i);

    //找到code元素，并添加id属性，id的值和复制按钮的属性 data-clipboard-target 的值是一样的
    //判断pre标签内是否含有code标签，如是则执行
    if (codecopy.firstChild.localName == 'code') {

      codecopy.firstChild.id = 'code_' + i;
      //将复制按钮追加至页面
      let html = codecopy.innerHTML + html_temp;

      codecopy.innerHTML = html;
    }
  }
  /*初始化复制功能*/
  const clipboardJs = new ClipboardJS('.codecopy-btn'); //注意：ClipboardJS替代了Clipboard

  /*复制失败事件*/
  clipboardJs.on('error', function (e) {
    console.log(e);
  });
}

export default Highlight;
